<template>
	<view>
		
		
				<view class="listBox">
					<!-- 左边图片 -->
					<view class="list-left">
						 <radio color="#4dd6aa" :checked="goods.goods_state" v-if="showRadio" @click="changeRadio"/>
						<image :src="goods.goods_small_logo || defaultPic" mode=""></image>
					</view>
					<!-- 右边信息 -->
					<view class="list-right">
						<view class="list-right-title">
							{{goods.goods_name}}
						</view>
						<view class="list-right-price">
							¥{{goods.goods_price | toFixed}}
						</view>
						<uni-number-box class="numberBox" :min="1" :value="goods.goods_count" v-if="showNumberBox" @change="changeNumber"></uni-number-box>
					</view>
				</view>
		
		
	</view>
</template>

<script>
	export default {
		name:"my-goods",
		data() {
			return {
				// 默认图片，当商品图片显示不了的时候，就显示默认图片
				defaultPic: 'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png',
			};
		},
		created() {
			console.log('goods.goods_state==>',this.goods.goods_state)
		},
		updated() {
			console.log('goods.goods_state==>',this.goods.goods_state)
		},
		props:{
			goods:{
				type:Object,
				default:{}
			},
			showRadio:{
				type:Boolean,
				default:false
			},
			showNumberBox:{
				type:Boolean,
				default:false
			}
		},
		filters:{
			// 把数字处理成两位小数
			toFixed(num){
				return Number(num).toFixed(2);
			}
		},
		methods:{
			// 点击了单选框
			changeRadio(){
				this.$emit('changeRadio',{
					goods_id:this.goods.goods_id,
					goods_state:!this.goods.goods_state
				})
			},
			changeNumber(val){
				this.$emit('changeNumber',{
					goods_id:this.goods.goods_id,
					goods_count:val+0
				})
			}
		}
	}
</script>

<style lang="scss">
.listBox{
	width: 700rpx;
	height: 160rpx;
	margin: 0 auto;
	display: flex;
	padding:10px 10px;
	border-bottom: 2px solid #f7f7f7;
	.list-left{
		// width: 160rpx;
		height: 160rpx;
		margin-right: 10px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		image{
			width: 150rpx;
			height: 150rpx;
		}
	}
	.list-right{
		flex: 1;
		height:100%;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		position: relative;
		.numberBox{
			position: absolute;
			bottom: 0;
			right: 10rpx;
		}
		.list-right-title{
			font-size: 28rpx;
			overflow: hidden;
			display: -webkit-box;    
			-webkit-box-orient: vertical;    
			-webkit-line-clamp: 2;  
		}
		.list-right-price{
			font-size: 32rpx;
			color: #e4393c;
		}
	}
}
</style>
